<template>
  <div class="index">
    <div class="logo">
      <span>Choco.</span>
    </div>
    <!-- 登录 -->
    <div class="login">
      <div class="input">
        <van-field
          clearable
          v-model="username"
          left-icon="contact"
          placeholder="请输入账户名"
        ></van-field>
        <van-field
          clearable
          v-model="password"
          left-icon="lock"
          type="password"
          placeholder="请输入密码"
        ></van-field>
      </div>
      <div class="button">
        <van-button @click="register" round type="info" plain>注 册</van-button>
        <van-button @click="login" round type="info">登 录</van-button>
      </div>
    </div>
    <div class="footer">
      ©️xy
      <a target="_blank" href="http://beian.miit.gov.cn/">蜀ICP 2024058254 号</a>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Index',
  data() {
    return {
      username: '',
      password: ''
    };
  },
  created() {
    this.init();
  },
  methods: {
    // 初始化
    init() {
      const userId = this.$xy.get('choco-token');

      if (userId) {
        this.$router.push('/circle?userId=' + userId);
      }
    },

    // 注册
    register() {},

    // 登录
    login() {
      if (!this.username) {
        this.$toast('账号不能为空');
      } else if (!this.password) {
        this.$toast('密码不能为空');
      } else if (this.username !== 'choco' || this.password !== '111111') {
        this.$toast('账号或密码错误');
      } else {
        const userId = this.$xy.RI();
        this.$xy.set('choco-token', userId);
        this.$router.push('/circle?userId=' + userId);
      }
    }
  }
};
</script>

<style lang="scss">
.index {
  height: 100vh;
  font-size: 14px;
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;

  .logo {
    width: 100%;
    text-align: center;
    background-color: rgb(0, 128, 192);
    padding: 90px 0;
    display: flex;
    backdrop-filter: blur(6px);
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 3px rgba($color: #575757, $alpha: 0.5);

    img {
      height: 30px;
      width: 30px;
    }

    span {
      color: #fff;
      font-size: 20px;
    }
  }

  .login {
    position: absolute;
    box-sizing: border-box;
    padding: 0 30px;
    top: 38%;
    width: 100%;

    .input .van-cell {
      padding: 10px;
      margin-bottom: 20px;
    }

    .van-field.van-cell:last-child::before {
      position: absolute;
      box-sizing: border-box;
      content: ' ';
      pointer-events: none;
      right: 0.42667rem;
      bottom: 0;
      left: 0.42667rem;
      border-bottom: 0.02667rem solid #ebedf0;
      -ms-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }

    .van-icon {
      color: #999;
      margin-right: 10px;
    }
  }

  .login .button {
    display: flex;
    margin-top: 50px;
  }

  .login button {
    width: 100%;

    &:first-child {
      margin-right: 10px;
    }
  }

  .footer {
    color: #ccc;
    font-size: 12px;
    position: absolute;
    bottom: 10px;
    text-align: center;
    width: 100%;

    a {
      color: #ccc;
    }
  }
}
</style>
